<template lang="pug">
  div.previw(v-show="preview")
    div.svg-wrapper(v-html="preview" :style="{backgroundColor}")
    span.note {{ combination && combination.name }}
</template>

<script setup>

import { computed, ref, onMounted, watch, inject, nextTick } from 'vue';
import { mergeCombSvg } from '@/utils/mergeCombSvg.util.js'
// import { mockComb } from '@/utils/mapCombCoord.util.js'
import * as mockData from './mockData.js'

const props = defineProps({
  combination: { type: Object },
})
const graphics = inject('graphics')
const compositions = inject('compositions')
const preview = ref('')

watch(() => props.combination, combination => {
  if (!checkComb(combination)) { return }
  const svg = mergeCombSvg(combination, {
    graphics: graphics.value,
    compositions: compositions.value,
  })
  // const svg = mergeCombSvg(mockComb, mockData)
  preview.value = svg
}, { deep: true, immediate: true })

function checkComb(combination) {
  if (!combination.structure) { return }
  let isCompleted = true
  combination.groups.forEach(item => {
    const elemId = item[item.type + 'Id']
    isCompleted = isCompleted && item.type && elemId && item.size
  })
  return isCompleted
}

const backgroundColor = computed(() => {
  // const colorId = props.combination.backgroundColorId
  // return color?.hex
  return '#eee'
})

</script>

<style scoped>
.note {
  font-size: 0.7rem;
}

.svg-wrapper svg {
  border: 2px solid #fff;
}
</style>
